<template>
    <div :id="id" :style="{ height: height, width: width }"></div>
</template>
<script setup>
/**
 * 该组件意图是尽量将各个配置项的数据与样式相分离，该组件提前制定了一些默认样式，只有再默认样式不满足需求时，再去进行调整，调用者只需处理好数据即可
 */
import { color } from 'echarts'
import { computed, getCurrentInstance, useAttrs, defineExpose, ref, onUnmounted } from 'vue'
const vueProperty = getCurrentInstance().appContext.config.globalProperties
const echarts = vueProperty.$echarts
const util = vueProperty.$util
const $attrs = useAttrs()
const props = defineProps({
    title: {
        type: String,
    },
    chartId: {
        type: String,
        default: 'myChart'
    },
    height: {
        type: String,
        default: '400px'
    },
    width: {
        type: String,
        default: '100%'
    },
    // 映射关系，必填
    // [{prop:'',name:''}]
    relation: {
        type: Array,
        default: () => []
    },
    legend: {
        type: [Object, Array],
        default: () => { return {} }
    },
    xAxis: {
        type: Array,
        default: () => []
    },
    yAxis: {
        type: Array,
        default: () => []
    },
    series: {
        type: Array,
        default: () => []
    },
    // grid: {
    //     type: Object,
    //     default: () => { return {} }
    // },
    tooltip: {
        type: Object,
        default: () => { return {} }
    },
    // dataZoom: {
    //     type:Array,
    // }
})
const id = computed(() => {
    return props.chartId + '-' + Math.random().toString(36).slice(2, 9)
})
let options = {}
// chart实列
let chart = undefined
const init = () => {
    if (!props.relation.length) {
        console.error('请传入映射关系')
        return
    }
    options.title = props.title
    options.legend = handleLegend()
    options.xAxis = handlexAxis()
    options.yAxis = handleyAxis()
    options.series = handleSeries()
    options.tooltip = handleTooltip()
    // console.log(options.legend)
    options = {
        ...options,
        ...$attrs,
    }
    chart = echarts.init(document.getElementById(id.value))
    if(chart) chart.setOption(options)
}
const color1 = 'rgb(82, 156, 205)'
// 图表默认配置
const defaultOptions = {
    legend: {
        show: true,
        type: 'scroll',
        top: 'top',
        left: 'center',
    },
    xAxis: {
        type: "category",
        axisLine: {
            lineStyle: {
                color: color1,
            },
        },
        axisTick: {
            lineStyle: {
                color: color1,
            },
        },
        axisLabel:{
            color: 'red',
        }
    },
    yAxis: {
        type: "value",
        axisLine: {
            show: true,
            lineStyle: {
                color: color1
            },
        },
        axisLabel: {
            color: 'red',
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: color1
            }
        }
    },
    series: {
        smooth: true, // 平滑曲线
        symbol: 'none', // 去除小圆点
    },
    tooltip: {
        trigger: 'axis',
    }
}
const handleLegend = () => {
    let legend = {}
    if (util.isObject(props.legend)) {
        legend = {
            ...defaultOptions.legend,
            ...props.legend,
            data: props.relation.map(item => item.name),
        }
    } else {
        let lengendData = []
        props.relation.forEach(item => {
            let items = props.legend.find(o => o.prop === item.prop)
            lengendData.push(
                {
                    name: item.name,
                    ...items,
                }
            )
        })
        legend = {
            ...defaultOptions.legend,
            data: lengendData,
        }
    }
    return legend
}
const handlexAxis = () => {
    let xAxis = []
    if (props.xAxis.length > 0) {
        xAxis = props.xAxis.map(item => {
            return {
                ...defaultOptions.xAxis,
                ...item,
            }
        })
    } else {
        xAxis = [defaultOptions.xAxis]
    }
    return xAxis
}
const handleyAxis = () => {
    let yAxis = []
    if (props.yAxis.length > 0) {
        yAxis = props.yAxis.map(item => {
            return {
                ...defaultOptions.yAxis,
                ...item,
            }
        })
    } else {
        yAxis = [defaultOptions.yAxis]
    }
    return yAxis
}
const handleSeries = () => {
    let series = []
    props.relation.forEach(item => {
        const obj = props.series.find(o => o.prop === item.prop)
        series.push({
            name: item.name,
            ...defaultOptions.series,
            ...obj,
        })
    })
    return series
}
const handleTooltip = () => {
    let tooltip = {}
    tooltip = {
        ...defaultOptions.tooltip,
        ...props.tooltip,
    }
    return tooltip
}
// 图表自适应
const chartResize = () => {
    window.addEventListener('resize',resize)
}
const resize = () => {
    chart.resize()
}
onUnmounted(() => {
    console.log('销毁')
    window.removeEventListener('resize',resize)
})
defineExpose({
    init,
    chartResize
})
// console.log(realId.value, util)
</script>
<style></style>